<template>
  <div class="container">
    <el-container class="home-container">
      <el-header height="100px">
        <div class="home-title">
          <img alt="" class="home-logo" src="../assets/logo.jpg"/>
          <h6>一麓童行-后台管理系统</h6>
        </div>
        <div class="logout-btn" @click="handleLogout($router)">注销</div>
      </el-header>
      <el-container>
        <el-aside width="auto">
          <el-menu
              :collapse="asideShow"
              :collapse-transition="false"
              :unique-opened="true"
              active-text-color="#FD602F"
              background-color="rgb(235, 235, 235)"
              :default-active="activityKey"
          >
            <el-menu-item index="/show" @click="asideShow = !asideShow">
              <i class="el-icon-s-unfold"></i>
              <span v-if="asideShow" slot="title">展开</span>
              <span v-else slot="title">折叠</span>
            </el-menu-item>
            <el-submenu index="/activityManage">
              <template slot="title">
                <i class="el-icon-s-management"></i
                ><span slot="title">活动管理</span>
              </template>
              <el-menu-item index="/jobSetting" @click="goNext('/jobSetting')"
              >岗位设置
              </el-menu-item
              >
              <el-menu-item
                  index="/addActivity"
                  @click="goNext('/addActivity')"
              >活动发布
              </el-menu-item
              >
              <el-menu-item
                  index="/activityAsk"
                  @click="goNext('/activityAsk')"
              >活动审核
              </el-menu-item
              >
              <el-menu-item
                  index="/activitySign"
                  @click="goNext('/activitySign')"
              >活动签到
              </el-menu-item
              >
              <el-menu-item
                  index="/activityList"
                  @click="goNext('/activityList')"
              >活动列表
              </el-menu-item
              >

              <el-menu-item
                  index="/activityLeaveAudit"
                  @click="goNext('/activityLeaveAudit')"
              >请假审核
              </el-menu-item
              >
              <el-menu-item
                  index="/activityLeaveList"
                  @click="goNext('/activityLeaveList')"
              >
                请假列表
              </el-menu-item
              >
            </el-submenu>
            <el-submenu index="/articleManage">
              <template slot="title">
                <i class="el-icon-reading"></i
                ><span slot="title">风采管理</span>
              </template>
              <!--              <el-menu-item index="articleRelease/" @click="goNext('/addArticle')">发布风采</el-menu-item>-->
              <el-menu-item index="/articleAsk" @click="goNext('/articleAsk')"
              >风采审核
              </el-menu-item
              >
              <el-menu-item index="/articleList" @click="goNext('/articleList')"
              >风采列表
              </el-menu-item
              >
              <el-menu-item index="/bannerList" @click="goNext('/bannerList')"
              >简报管理
              </el-menu-item>
              <!--               todo -->
              <el-menu-item index="/addArticle" @click="goNext('/addArticle')"
              >简报发布
              </el-menu-item>
            </el-submenu>
            <el-submenu index="/voteManage">
              <template slot="title">
                <i class="el-icon-eleme"/><span slot="title">投票管理</span>
              </template>
              <el-menu-item index="/addVote" @click="goNext('/addVote')"
              >发布投票
              </el-menu-item
              >
              <el-menu-item index="/voteList" @click="goNext('/voteList')"
              >投票结果
              </el-menu-item
              >
            </el-submenu>
            <el-menu-item
                index="/communityList"
                @click="goNext('/communityList')"
            >
              <i class="el-icon-s-grid"/>
              <template slot="title">
                <span>社团管理</span>
              </template>
            </el-menu-item>
            <el-submenu
                index="/volunteerList"
                @click="goNext('/volunteerList')"
            >
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span slot="title">志愿者管理</span>
              </template>
              <el-menu-item
                  index="/volunteerList"
                  @click="goNext('/volunteerList')"
              >志愿者列表
              </el-menu-item
              >
              <el-menu-item index="/familyList" @click="goNext('/familyList')"
              >家庭列表
              </el-menu-item
              >
              <!--家庭-》功能建 重置密码-->
              <el-menu-item
                  index="/blackVolunteer"
                  @click="goNext('/blackVolunteer')"
              >黑名单列表
              </el-menu-item
              >
              <el-menu-item
                  index="/volunteerScore"
                  @click="goNext('/volunteerScore')"
              >时长积分统计
              </el-menu-item
              ><!--获取总时长和积分-->
            </el-submenu>
            <el-submenu index="/courseCenter">
              <template slot="title">
                <i class="el-icon-date"></i> <span>课程中心</span>
              </template>
              <el-submenu index="/courseManage">
                <template slot="title">
                  <i class="el-icon-date"></i> <span>课程管理</span>
                </template>
                <el-menu-item
                    index="/teacherManage"
                    @click="goNext('/teacherManage')"
                >教师管理
                </el-menu-item
                >
                <el-menu-item index="/addCourse" @click="goNext('/addCourse')"
                >新建课程
                </el-menu-item
                >
                <el-menu-item
                    index="/arrangeCourse"
                    @click="goNext('/arrangeCourse')"
                >课程排课
                </el-menu-item
                >
              </el-submenu>
              <el-menu-item index="/courseSign" @click="goNext('/courseSign')"
              >课程签到
              </el-menu-item
              >
              <el-menu-item index="/courseList" @click="goNext('/courseList')"
              >课程列表
              </el-menu-item
              >
              <el-submenu index="/courseLeaveManage">
                <template slot="title">
                  <i class="el-icon-date"></i>
                  <span slot="title">请假管理</span>
                </template>
                <el-menu-item
                    index="/courseLeaveAudit"
                    @click="goNext('/courseLeaveAudit')"
                >请假审核
                </el-menu-item
                >
                <el-menu-item
                    index="/courseLeaveList"
                    @click="goNext('/courseLeaveList')"
                >请假列表
                </el-menu-item>
              </el-submenu>
            </el-submenu>

            <el-submenu index="/communityManage">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span slot="title">商城管理</span>
              </template>
              <el-menu-item
                  index="/addCommodity"
                  @click="goNext('/addCommodity')"
              >发布商品
              </el-menu-item
              >

              <el-menu-item
                  index="/commodityList"
                  @click="goNext('/commodityList')"
              >商品列表
              </el-menu-item
              >
              <el-menu-item index="/giftsOrderList" @click="goNext('/giftsOrderList')">
                礼品订单
              </el-menu-item>
              <el-menu-item index="/goodsOrderList" @click="goNext('/goodsOrderList')">
                商品订单
              </el-menu-item>
            </el-submenu>

            <el-submenu index="/orderManager">
              <template slot="title">
                <i class="el-icon-cpu"></i>
                <span slot="title">订单处理</span>
              </template>
              <el-menu-item index="/orderManager" @click="goNext('/orderManager')">
                退款处理
              </el-menu-item>

              <el-menu-item index="/orderStatistic" @click="goNext('/orderStatistic')">
                订单汇总
              </el-menu-item>

            </el-submenu>
            <el-submenu index="/manageSetting">
              <template slot="title"
              ><i class="el-icon-s-tools"></i>
                <span slot="title">管理员设置</span>
              </template>
              <el-menu-item index="/addManage" @click="goNext('/addManage')"
              >添加管理员
              </el-menu-item
              >
              <el-menu-item index="/managerList" @click="goNext('/managerList')"
              >管理员列表
              </el-menu-item
              >
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view class="main-window"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  data: function () {
    return {
      asideShow: false,
      activityKey: "addActivity",
    };
  },
  watch: {
    "$route.path": {
      handler (val) {
        this.activityKey = val;
      },
      immediate: true,
    },
  },
  methods: {
    // 退出登录
    handleLogout ($router) {
      sessionStorage.clear();
      $router.replace("/");
    },
    goNext (url) {
      this.$router.push(url).catch((e) => {
        return null;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
}

.home-container {
  height: 100%;

  .el-header {
    background-color: #00a0e9;
    color: white;
    height: 200px;

    .home-title {
      font-size: 28px;
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 40px;

      .home-logo {
        width: 60px;
        height: 60px;
        display: block;
        margin-right: 20px;
        background-color: white;
        box-shadow: 0 0 5px black;
        border-radius: 50%;
        padding: 10px;
        overflow: hidden;
      }
    }

    .logout-btn {
      position: absolute;
      top: 30px;
      right: 60px;
      background-color: rgb(58, 58, 58);
      color: white;
      padding: 10px 20px;
      border-radius: 6px;
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.219);
    }

    .logout-btn:hover {
      cursor: pointer;
      background-color: rgba(0, 0, 0, 0.397);
      color: white;
    }
  }


  .el-aside {
    background-color: rgb(235, 235, 235);
  }
}
</style>
